html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

.clearfix {
    /*common css 开始*/
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 100%;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0px;
    padding: 0px;
    font: 14px "微软雅黑";
}

a {
    text-decoration: none;
    display: block;
}

li {
    list-style: none;
}

img {
    display: block;
}

/*css reset 结束*/

/*common css 开始*/
.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.commonTitle {
    color: #009ee0;
    font-size: 80px;
    line-height: 0.8;
    font-weight: bold;
    letter-spacing: -5px;
}

.commonText {
    color: white;
    line-height: 1.5;
    font-size: 15px;
}

/*common css 结束*/

/*头部样式 开始*/
#head {
    background: white !important;
    width: 100%;
}

#head .headMain {
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative;
}

#head .headMain>.logo {
    float: left;
    margin-top: 30px;
}

#head .headMain>.nav {
    float: right;
    margin-top: 50px;
}

#head .headMain>.nav>.list>li {
    float: left;
    margin-left: 40px;
    position: relative;
}

#head .headMain>.nav>.list>li .up {
    color: #000000;
    position: absolute;
    width: 0;
    overflow: hidden;
    transition: 1s width;
}

#head .headMain>.nav>.list>li:hover .up {
    width: 100%;
}

/*头部样式 结束*/

/*内容区样式 开始*/
#content {
    background: gray;
    position: relative;
    overflow: hidden;
    width: 100%;
}

#content>.list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transition: 1s top;
}

#content>.list>li {
    position: relative;
    background-position: 50% 50% !important;
    overflow: hidden;
}

#content>.list>li>section {
    width: 1100px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/*第三屏 start*/
#content>.list>.works .works1 {
    margin: 50px 0px 100px 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2 {
    margin-left: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.works .works2>.item {
    float: left;
    width: 220px;
    height: 133px;
    margin: 0 1px;
    position: relative;
    overflow: hidden;
}

#content>.list>.works .works2>.item:last-of-type {
    width: 332px
}

#content>.list>.works .works2>.item .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #000000;
    opacity: 0;
    color: white;
    transition: 1s opacity;
}

#content>.list>.works .works2>.item .mask .icon {
    width: 32px;
    height: 34px;
    margin: 0 auto;
    margin-top: 10px;
    transition: 1s background-position;
}

#content>.list>.works .works2>.item img {
    transition: 1s transform;
}


#content>.list>.works .works2>.item .mask .icon:hover {
    background-position: 0 -35px;
}

#content>.list>.works .works2>.item:hover .mask {
    opacity: 0.8;
}

#content>.list>.works .works2>.item:hover img {
    transform: rotate(30deg) scale(1.5);
}


@keyframes works3Move {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }

    49% {
        transform: translateX(-490px) rotateY(0deg);
    }

    50% {
        transform: translateX(-500px) rotateY(180deg);
    }

    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

/*第三屏 end*/


/*第二屏 start*/
#content>.list>.course .course1 {
    margin: 50px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course2 {
    margin-left: 50px;
    width: 400px;
    position: relative;
    z-index: 2;
}

#content>.list>.course .course3 {
    width: 480px;
    position: absolute;
    z-index: 2;
    right: 50px;
    top: 70px;
}

#content>.list>.course .course3 .line {
    position: absolute;
    top: -7px;
    width: 9px;
    height: 410px;
}

#content>.list>.course .course3 .line:nth-of-type(1) {
    left: -5px;
}

#content>.list>.course .course3 .line:nth-of-type(2) {
    left: 115px;
}

#content>.list>.course .course3 .line:nth-of-type(3) {
    left: 235px;
}

#content>.list>.course .course3 .line:nth-of-type(4) {
    left: 355px;
}

#content>.list>.course .course3 .line:nth-of-type(5) {
    left: 475px;
}

#content>.list>.course .course3 .item {
    float: left;
    width: 120px;
    height: 132px;
    position: relative;
    perspective: 500px;
    transform-style: preserve-3d;
}

#content>.list>.course .course3 .item .face,
#content>.list>.course .course3 .item .backFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 15px;
    transition: 1s transform;
}

#content>.list>.course .course3 .item .backFace {
    background-position: 50% 50% !important;
}


#content>.list>.course .course3 .item:hover .face {
    transform: rotateY(360deg);
}

#content>.list>.course .course3 .item:hover .backFace {
    transform: rotateY(180deg);
}

/*第二屏 end*/

/*第一屏 start*/
#content>.list>.home .home1 {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#content>.list>.home .home1>li {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    visibility: hidden;
}

#content>.list>.home .home1>li:nth-child(1) {
    background: #dc6c5f;
}

#content>.list>.home .home1>li:nth-child(2) {
    background: #95dc84;
}

#content>.list>.home .home1>li:nth-child(3) {
    background: #64b9d2;
}

#content>.list>.home .home1>li:nth-child(4) {
    background: #000000;
}

#content>.list>.home .home1>li>div {
    color: white;
    text-align: center;
    margin-top: 200px;
}

#content>.list>.home .home1>li.active {
    visibility: visible;
}

#content>.list>.home .home2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
}

#content>.list>.home .home2>li {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);
    cursor: pointer;
}

#content>.list>.home .home2>li.active {
    background: white;
    cursor: default;
}

/*从左往右 leftHide  rightShow*/
#content>.list>.home .home1>li.leftHide {
    visibility: hidden;
    animation: 1s leftHide 1 linear;
}

#content>.list>.home .home1>li.rightShow {
    visibility: visible;
    animation: 1s rightShow 1 linear;
}

@keyframes leftHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

@keyframes rightShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {}
}

/*从右往左 leftShow  rightHide*/
#content>.list>.home .home1>li.leftShow {
    visibility: visible;
    animation: 1s leftShow 1 linear;
}

#content>.list>.home .home1>li.rightHide {
    visibility: hidden;
    animation: 1s rightHide 1 linear;
}

@keyframes leftShow {
    0% {
        visibility: hidden;
        transform: translateZ(-200px);
    }

    50% {
        transform: translateX(-40%) rotateY(30deg) scale(.8);
    }

    100% {}
}

@keyframes rightHide {
    0% {
        visibility: visible;
    }

    50% {
        transform: translateX(40%) rotateY(-30deg) scale(.8);
    }

    100% {
        transform: translateZ(-200px);
    }
}

/*第一屏 end*/
/*第四屏 strat*/
#content>.list>.about .about1 {
    margin: 50px 0 100px 50px;
}

#content>.list>.about .about2 {
    margin-left: 50px;
    width: 400px;
}

#content>.list>.about .about3>.item {
    width: 260px;
    height: 200px;
    border: 5px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}

#content>.list>.about .about3>.item:nth-child(1) {
    left: 750px;
    top: 50px
}

#content>.list>.about .about3>.item:nth-child(2) {
    left: 600px;
    top: 290px
}

#content>.list>.about .about3>.item>span,
#content>.list>.about .about3>.item>ul {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#content>.list>.about .about3>.item:hover span {
    transform: scale(1);
}

#content>.list>.about .about3>.item>ul>li {
    float: left;
    position: relative;
    overflow: hidden;
}

#content>.list>.about .about3>.item>ul>li>img {
    position: absolute;
    transition: 1s top, 1s left;
}

/*第四屏 end*/
/*第五屏 strat*/
#content>.list>.team .team1 {
    width: 400px;
    margin: 50px;
    float: left;
}

#content>.list>.team .team2 {
    width: 400px;
    margin: 50px;
    float: right;
}

#content>.list>.team .team3 {
    width: 944px;
    height: 448px;
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 250px;
}

#content>.list>.team .team3 ul {
    position: relative;
    height: 100%;
}

#content>.list>.team .team3 ul>li:nth-child(1) {
    background-position: 0, 0;
}

#content>.list>.team .team3 ul>li:nth-child(2) {
    background-position: -118px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(3) {
    background-position: -236px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(4) {
    background-position: -354px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(5) {
    background-position: -472px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(6) {
    background-position: -590px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(7) {
    background-position: -708px, 0;
}

#content>.list>.team .team3 ul>li:nth-child(8) {
    background-position: -826px, 0;
}

#content>.list>.team canvas {
    position: absolute;
    top: 0px;
}

/*第五屏 end*/


/*小圆点*/
#content>.dot {
    position: fixed;
    right: 10px;
    top: 50%;
}

#content>.dot>li {
    width: 10px;
    height: 10px;
    border: 5px solid pink;
    margin-top: 10px;
    border-radius: 50%;
}

#content>.dot>li.active {
    background: white;
}


/*内容区样式 结束*/


/*出入场*/
#content>.list>.home .home1,
#content>.list>.home .home2 {
    transition: 1s transform, 1s opacity;
}

#content>.list>.about .about3>.item,
#content>.list>.team .team1,
#content>.list>.team .team2 {
    transition: 1s transform;
}


/*音频*/

/*开机动画*/
#mask {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 100;
}

#mask .up {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
}

#mask .down {
    width: 100%;
    height: 50%;
    background: deepskyblue;
    transition: 1s height;
    position: absolute;
    bottom: 0;
}